<script setup lang="ts" name="PreView">
import { onMounted, computed } from 'vue'
import { useCompStore  } from '@/stores/compConfig';
import { useLayoutStore  } from '@/stores/layoutConfig';
import { storeToRefs } from 'pinia'

const compStore = useCompStore();
const { compList } = storeToRefs(compStore);
const layoutStore = useLayoutStore();
const { currLayout } = storeToRefs(layoutStore);
onMounted(() => {
  console.log('onMounted', compList, currLayout)
})
const layoutList = computed(() => {
  return compList.value.slice(0, currLayout.value)
})
const currentComponents = computed(() => {
  return compList.value.map((item:any) => item?.comp)
})
</script>

<template>
  <div class="preview">
    <div class="header">
      <HeaderComp/>
    </div>
    <div class="content">
      <div :class="['item', 'item' + currLayout]" v-for="(item, index) in layoutList" :key="index">
        <component :is="currentComponents[index]" v-model="compList[index]"></component>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
@import '@/style/preview.scss';
</style>
